import {Component, OnDestroy, OnInit} from "@angular/core";

declare var $: any;
import * as e from "echarts";
import {sjgzxinModuledatas} from "../pubcomponent/pageTitle.datas";
import {CommService} from "../comm-service";
import {MyhttpService} from "../myhttp.service";

@Component({
  template: `
  <div class="all_bg paddingTop">
    <div class="row">
      <div class="col-lg-12">
        <div class="zl">
          <div class="head">
            <span class="color1">设备库存统计</span>
            -
            <span class="color">手持终端总数</span>
            <span class="color marleft">总数：{{zdallCount}}</span>
          </div>
          <div class="body">
            <div id="sczdzs"></div>
          </div>
        </div>
        <div class="zl">
          <div class="head">
            <span class="color1">设备库存统计</span>
            -
            <span class="color">电子标签总数</span>
            <span class="color marleft">总数：{{bqallCount}}</span>
          </div>
          <div class="body">
            <div id="dzbqzs"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="zl">
          <div class="head">
            <span class="color1">在线离线统计</span>
            -
            <span class="color">手持终端</span>
            <span class="color marleft">在线总数：{{zd_zxallCount}}</span>
            <span class="color marleft">离线总数：{{zd_lxallCount}}</span>
          </div>
          <div class="body">
            <div id="sczd"></div>
          </div>
        </div>
        <div class="zl">
          <div class="head">
            <span class="color1">在线离线统计</span>
            -
            <span class="color">电子标签</span>
            <span class="color marleft">在线总数：{{bq_zxallCount}}</span>
            <span class="color marleft">离线总数：{{bq_lxallCount}}</span>
          </div>
          <div class="body">
            <div id="dzbq"></div>
          </div>
        </div>
      </div>
    </div>
    </div>
  `,
  styles: [
    ".zl{border: 1px solid #ccc;padding: 10px; border-radius: 2px;position: relative;margin-bottom: 15px}",
    ".head{height:30px;line-height:30px;padding-left:10px;background-color:rgb(206, 232, 255);}",
    ".color{color:rgb(138 143 151);}",
    ".color1{color:rgb(16, 90, 200)}",
    ".marleft{margin-left:50px;}",
    "#sczdzs{width:1580px;height:168px;}",
    "#dzbqzs{width:1580px;height:168px;}",
    "#sczd{width:1580px;height:168px;}",
    "#dzbq{width:1580px;height:168px;}",
  ]
})
export class TjbbSbzlComponent implements OnInit, OnDestroy {
  scsbzs: any;
  dzbqzs: any;
  scsb: any;
  dzbq: any;

  zdallCount: number = 0;  //终端  所有分组  在线+ 离线
  bqallCount: number = 0;  //终端  所有分组  在线+ 离线
  zd_zxallCount: number = 0;  //终端 所有分组  在线
  zd_lxallCount: number = 0;  //终端  所有分组  离线
  bq_zxallCount: number = 0;  // 标签  所有分组  在线
  bq_lxallCount: number = 0;   // 标签  所有分组  离线

  initzds(items: any[], data: any[]): void {
    const that = this;
    if (this.scsbzs) {
      this.scsbzs.clear();
    } else {
      this.scsbzs = e.init(document.getElementById('sczdzs') as HTMLDivElement);
    }
    const option = {
      color: 'rgb(141, 202, 247)',
      grid: {
        left: '2%',
        right: '2%',
        top: '8%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: items,
          axisLabel: {
            fontSize: 16,
            color: "rgb(138, 143, 151)",
            interval: 0,  // 强制显示所有
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(138, 143, 151,0.5)'
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            fontSize: 16,
            color: "rgb(138, 143, 151)",
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(138, 143, 151,0.5)'
            }
          },
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      series: [
        {
          name: '手持终端总数',
          type: 'line',
          symbol: "circle",
          symbolSize: 10,
          stack: '总量',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#0050C3' // 0% 处的颜色
              }, {
                offset: 1, color: '#CEE8FF' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          data: data
        }
      ]
    };
    this.scsbzs.setOption(option);
  }

  initbqs(items: any[], data: any[]): void {
    const that = this;
    if (this.dzbqzs) {
      this.dzbqzs.clear();
    } else {
      this.dzbqzs = e.init(document.getElementById('dzbqzs') as HTMLDivElement);
    }
    const option = {
      color: 'rgb(202, 221, 139)',
      grid: {
        left: '2%',
        right: '2%',
        top: '8%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: items,
          axisLabel: {
            fontSize: 16,
            color: "rgb(138, 143, 151)",
            interval: 0,  // 强制显示所有
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(138, 143, 151,0.5)'
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            fontSize: 16,
            color: "rgb(138, 143, 151)",
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(138, 143, 151,0.5)'
            }
          },
        }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      series: [
        {
          name: "电子标签总数",
          type: 'line',
          stack: '总量',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#CADD1B' // 0% 处的颜色
              }, {
                offset: 1, color: '#CADD8B' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          data: data
        }
      ]
    };
    this.dzbqzs.setOption(option);
  }

  initzd(items: any, zxdata: any[], lxdata: any[]): void {
    const that = this;
    if (this.scsb) {
      this.scsb.clear();
    } else {
      this.scsb = e.init(document.getElementById('sczd') as HTMLDivElement);
    }
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (param) {
          let result = '';
          let axisName = '';
          param.forEach(function (item) {
            axisName = item.axisValue;
            const itemValue = item.marker + item.seriesName + ": " + item.data + "</br>";
            result += itemValue
          });
          const allResult = axisName + "</br>" + result;
          return allResult
        }
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '0%',
        top: "17%",
        containLabel: true
      },
      legend: {
        left: "right",
        top: "top",
        itemWidth: 15,
        itemHeight: 15,
        itemGap: 25,
        icon: "rect",
        textStyle: {
          color: "rgb(138, 143, 151)",
          fontSize: 16
        }
      },
      xAxis: [{
        type: 'category',
        data: items,
        axisLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138, 143, 151)",
          interval: 0,  // 强制显示所有
        },
        axisTick: {
          show: false,
          alignWithLabel: false,
        },
        //boundaryGap: false,
      }],
      yAxis: [{
        type: 'value',
        // min: 0,
        // max: 500,
        interval: 100,
        axisLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138, 143, 151)",
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisTick: {
          show: false,
        }
      }],
      series: [{
        type: "bar",
        name: "离线",
        barWidth: 20,
        itemStyle: {
          color: "rgba(246, 217, 115,0.8)",
        },

        label: {
          show: true,  //数据开启显示
          position: "top", //上方显示
          fontSize: 16,
        },
        //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        data: lxdata,
      }, {
        type: "bar",
        name: "在线",
        barWidth: 20,
        itemStyle: {
          color: "rgba(255,176,94,0.8)"
        },
        label: {
          show: true,
          position: "top",
          fontSize: 16,
        },
        //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        data: zxdata
      }]
    };
    this.scsb.setOption(option);
  }

  initbq(items: any[], zxdata: any[], lxdata: any[]): void {
    const that = this;
    if (this.dzbq) {
      this.dzbq.clear();
    } else {
      this.dzbq = e.init(document.getElementById('dzbq') as HTMLDivElement);
    }
    const option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (param) {
          let result = '';
          let axisName = '';
          param.forEach(function (item) {
            axisName = item.axisValue;
            const itemValue = item.marker + item.seriesName + ": " + item.data + "</br>";
            result += itemValue
          });
          const allResult = axisName + "</br>" + result;
          return allResult
        }
      },
      grid: {
        left: '2%',
        right: '0%',
        bottom: '0%',
        top: "17%",
        containLabel: true
      },
      legend: {
        left: "right",
        top: "top",
        itemWidth: 15,
        itemHeight: 15,
        itemGap: 25,
        icon: "rect",
        textStyle: {
          color: "rgb(138, 143, 151)",
          fontSize: 16
        }
      },
      xAxis: [{
        type: 'category',
        data: items,
        axisLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138, 143, 151)",
          interval: 0,  // 强制显示所有
        },
        axisTick: {
          show: false,
          alignWithLabel: false,
        },
        //boundaryGap: false,
      }],
      yAxis: [{
        type: 'value',
        // min: 0,
        // max: 500,
        interval: 100,
        axisLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisLabel: {
          fontSize: 16,
          color: "rgb(138, 143, 151)",
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(138, 143, 151,0.5)'
          }
        },
        axisTick: {
          show: false,
        }
      }],
      series: [{
        type: "bar",
        name: "离线",
        barWidth: 20,
        itemStyle: {
          color: "rgba(155, 229, 238,0.8)"
        },
        label: {
          show: true,
          position: "top",
          fontSize: 16,
        },
        //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        data: lxdata,
      }, {
        type: "bar",
        name: "在线",
        barWidth: 20,
        itemStyle: {
          color: "rgba(0, 188, 213,0.8)"
        },
        label: {
          show: true,
          position: "top",
          fontSize: 16,
        },
        //smooth: false, //  0.5 ,  如果是 number 0-1之间， 标识平滑度 越小表示越接近折线段，反之则反
        data: zxdata
      }]
    };
    this.dzbq.setOption(option);
  }


  getData(): void {
    const url = "sjgz/zsymtjbb/sbtjsbzl";
    this.itservice.kwPtPost(url, null).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const sczdsbtjListv = resp.sczdsbtjList ? resp.sczdsbtjList : [];
            const dzbqsbtjListv = resp.dzbqsbtjList ? resp.dzbqsbtjList : [];
            const zd_items: any[] = [];
            const bq_items: any[] = [];
            const zd_zxList: any[] = []; // 在线终端
            const zd_lxList: any[] = []; // 离线终端
            const zd_sumList: any[] = []; // 终端总数 =  在线终端+ 离线终端
            const bq_zxList: any[] = []; // 在线标签
            const bq_lxList: any[] = []; // 离线标签
            const bq_sumList: any[] = []; // 标签总数 = 在线标签+ 离线标签
            let zdcountAll: number = 0; // 手持终端所有分组总数（在线+ 离线）
            let bqcountAll: number = 0; // 标签所有分组总数   （在线+ 离线）
            let zd_zxcountAll: number = 0; // 终端所有分组总数（在线）
            let zd_lxcountAll: number = 0; // 终端所有分组总数（离线）
            let bq_zxcountAll: number = 0;   // 标签所有分组总数（在线）
            let bq_lxcountAll: number = 0; // 离线所有分组总数（离线）
            sczdsbtjListv.forEach((obj) => {
              const fzmcv = obj.fzmc; //分组名称
              const zxslv = obj.zxsl; // 在线数量
              const lxslv = obj.lxsl; // 离线数量
              zd_items.push(fzmcv);
              zd_zxList.push(zxslv);
              zd_lxList.push(lxslv);
              zd_sumList.push(zxslv + lxslv);
              zdcountAll += (zxslv + lxslv);
              zd_zxcountAll += zxslv;
              zd_lxcountAll += lxslv;
            });
            this.zdallCount = zdcountAll;
            this.zd_zxallCount = zd_zxcountAll;
            this.zd_lxallCount = zd_lxcountAll;

            dzbqsbtjListv.forEach((obj) => {
              const fzmcv = obj.fzmc;  // 分组名称
              const zxslv = obj.zxsl; // 在线数量
              const lxslv = obj.lxsl;  // 离线数量
              bq_items.push(fzmcv);
              bq_zxList.push(zxslv);
              bq_lxList.push(lxslv);
              bq_sumList.push(zxslv + lxslv);
              bqcountAll += (zxslv + lxslv);
              bq_zxcountAll += zxslv;
              bq_lxcountAll += lxslv;
            });
            this.bqallCount = bqcountAll;
            this.bq_zxallCount = bq_zxcountAll;
            this.bq_lxallCount = bq_lxcountAll;

            this.initzds(zd_items, zd_sumList);
            this.initbqs(bq_items, bq_sumList);
            this.initzd(zd_items, zd_zxList, zd_lxList);
            this.initbq(bq_items, bq_zxList, bq_lxList);

          }
        }
      });
    });
  }


  constructor(private commservice: CommService,
              private itservice: MyhttpService) {

  }

  ngOnInit() {
    this.getData();
  }

  ngOnDestroy() {

  }

}
